<script setup lang="ts">
import { Todo } from '../../types/todo'
import useTodo from '../../composables/useTodo'

const { deleteTodo, changeDone } = useTodo()

defineProps({
  todo: {
    type: Object as () => Todo,
    required: true,
  },
})
</script>

<template>
  <div class="border-b-gray-100 dark:border-b-gray-900 border-b h-12 flex justify-start items-center" @click="changeDone(todo.id)">
    <div class="text-xl mx-4 cursor-pointer">
      <i v-if="!todo.done" class="fa-duotone fa-clock text-green-500"></i>
      <i v-else class="fa-duotone fa-circle-check text-blue-500"></i>
    </div>
    <div :class="[todo.done ? 'text-gray-300 line-through' : '']" class="cursor-pointer flex-1 dark:text-gray-200">
      {{ todo.text }}
    </div>
    <div class="text-xl mx-2 text-gray-500 cursor-pointer" @click="deleteTodo(todo.id)">
      <i class="fa-duotone fa-circle-trash"></i>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
